<template>
	<qh-page-view title="支付成功">
		<view class="flex-column-100">
			<scroll-view scroll-y="true" class="scroll-view" :show-scrollbar="false" @scrolltolower="getRecommend">
				<view class="scroll-view-content">
					<view class="shadow-radius-item top-box flex-col-cn-cn">
						<image class="payment-img" :src="paySuccessImg"></image>

						<view class="payment-txt font500">支付成功</view>

						<view class="payment-group flex-cn-cn">
							<view class="top-btn flex-cn-cn back-index" @click="backIndex">进入商城</view>
							<view class="top-btn flex-cn-cn see-order" @click="seeOrder">查看订单</view>
						</view>
					</view>

					<!-- 推荐商品 -->
					<view v-if="goodsList.length > 0" class="home-recommend">
						<view class="home-nomoral-title-box">
							<view class="home-nomoral-title font500">你可能还会喜欢</view>
						</view>
						<view class="home-recommend-list-box">
							<view class="home-recommend-list" v-for="(item, index) in goodsList" :key="index" @click="details(item.goods_id)">
								<view class="home-recommend-list-img">
									<view v-if="item.goods_num <= 0" class="goods-sell-empty">已售空</view>
									<image mode="aspectFit" lazy-load="true" :src="item.goods_image"></image>
								</view>
								<view class="home-nomoral-list-name text-ellipsis">{{item.goods_name}}</view>
								<view v-if="item.promotion_status==1" class="home-recommend-price">￥{{item.act_price}}</view>
								<block v-else>
									<view class="home-recommend-price flex-cn" v-if="showPlusPrice(item)">
										<text class="plus-price-color">￥{{item.plus_price}}</text>
										<text class="plus-price-icon">PLUS</text>
									</view>
									<view class="home-recommend-price flex-cn" v-if="showVipPrice(item)">
										<text class="price-color">￥{{item.shop_mem_price}}</text>
										<text class="vip-price-icon">VIP</text>
									</view>
									<view class="home-recommend-price price-color" v-if="showOnlinePrice(item)">￥{{item.online_price}}</view>
								</block>
								<text class="qh-rt-single qh-rt-tianjia shop-car-btn" @click.stop="addToCar(index)"></text>
							</view>
						</view>
					</view>
					<view class="loading">
						<qh-loading row :value="isLoading" text="加载中" size="small"></qh-loading>
						<text v-if="!isLoading && canLoad">下拉加载更多</text>
						<text v-else-if="!isLoading && !canLoad && (!goodsList||!goodsList.length)">暂无推荐商品</text>
						<text v-else-if="!isLoading">已加载全部</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!--规格组件 -->
		<block v-if="showSelectSku">
			<choose-sku :sku="sku" :goodsinfo="goods" @close="closeSku"></choose-sku>
		</block>
	</qh-page-view>
</template>

<script>
	let app = getApp().globalData;
	export default {
		data() {
			return {
				paySuccessImg: '',
				money: 0,
				order_number: '',
				goodsList: [], //推荐商品列表
				recommendPage: 0, //推荐商品分页
				canLoad: true, //推荐商品是否可以加载
				isLoading: true, //推荐商品是否正在加载
				//规格
				sku: {},
				goods: {}, //待选择规格的商品信息
				showSelectSku: false, //是否显示规格弹窗
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			await this.$onLaunched;
			// #ifdef MP-WEIXIN
			this.paySuccessImg = this.$store.image_header + '/mall-direct-pay-success-wechat-pay.png'
			// #endif
			// #ifdef MP-ALIPAY
			this.paySuccessImg = this.$store.image_header + '/mall-direct-pay-success-alipay.png'
			// #endif

			this.money = options.money;
			this.order_number = options.order_number;
			this.getRecommend();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.getRecommend();
		},
		methods: {
			//添加到购物车
			async addToCar(index) {
				if (this.goodsList[index].attribute_state == 2) {
					this.sku.shoppingNum = 1;
					this.goods = {
						...this.goodsList[index],
						id: null
					};
					this.showSelectSku = true;
				} else {
					const res = await this.$mutations.setShoppingCar({
						goods_id: this.goodsList[index].goods_id,
						num: 1,
						goods_type: 2,
					})
				}
			},
			//组件上绑定的方法
			closeSku(data) {
				this.showSelectSku = false;
			},

			//查看订单
			seeOrder() {
				uni.navigateTo({
					url: './orderDetail?order_number=' + this.order_number
				})
			},
			//返回首页
			backIndex() {
				this.$store.merHomeState ? uni.reLaunch({
					url: '/pages/mer/tabbar/home/home',
				}) : uni.reLaunch({
					url: '/pages/store/store',
				});
			},
			// 展示plus会员价条件
			showPlusPrice(item) {
				return getApp().globalData.showPlusPrice(item)
			},

			// 展示会员价条件
			showVipPrice(item) {
				return getApp().globalData.showVipPrice(item)
			},

			// 展示普通价格
			showOnlinePrice(item) {
				return getApp().globalData.showOnlinePrice(item)
			},
			//商品详情
			details(id) {
				uni.navigateTo({
					url: '/pages/product/details/details?id=' + id
				});
			},
			//商家推荐商品
			getRecommend() {
				if (!this.canLoad) return;
				this.canLoad = false;
				this.isLoading = true;
				this.recommendPage++;
				getApp().globalData.sendRequest({
					url: '/Goods/getSellGoods_v1',
					needSign: false,
					data: {
						page: this.recommendPage
					},
					showLoading: false,
					success: (res) => {
						if (res.status == 1) {
							if (this.recommendPage != 1) {
								//第一页
								this.goodsList.push.apply(this.goodsList, res.info);
							} else {
								this.goodsList = res.info;
							}

							this.canLoad = res.info.length < res.limit || !res.info.length ? false : true;
							this.isLoading = false;
						}
					}
				});

			}
		}
	};
</script>
<style lang="scss">
	page {
		background-color: #F2F3F5;
	}

	.top-box {
		.payment-img {
			width: 158rpx;
			height: 80rpx;
			margin-top: 62rpx;
		}

		.payment-txt {
			width: 100%;
			color: #1E1E1E;
			font-size: 36rpx;
			line-height: 40rpx;
			text-align: center;
			margin-top: 38rpx;
		}

		.payment-group {
			box-sizing: border-box;
			width: 100%;
			margin-top: 70rpx;
			margin-bottom: 60rpx;
		}

		.top-btn {
			width: 224rpx;
			height: 72rpx;
			color: #1E1E1E;
			font-size: 28rpx;
			line-height: 36rpx;
			border-radius: 8rpx;
			box-sizing: border-box;
		}

		.back-index {
			border: 1rpx solid #eee;
			margin-right: 20rpx;
		}

		.see-order {
			background-color: #F2F3F5;
		}
	}

	.home-recommend {
		margin-top: 48rpx;
		padding: 0 28rpx;

		.home-nomoral-title-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.home-nomoral-title {
				font-size: 32rpx;
				color: #1E1E1E;
				line-height: 40rpx;
			}
		}

		.home-recommend-list-box {
			margin: 24rpx 0 50rpx;

			.home-recommend-list {
				width: 336rpx;
				margin-bottom: 20rpx;
				position: relative;
				display: inline-block;
				vertical-align: top;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				padding-bottom: 8rpx;

				&:nth-child(2n) {
					margin-left: 20rpx;
				}

				.home-recommend-list-img {
					width: 100%;
					height: 336rpx;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.home-nomoral-list-name {
					font-size: 30rpx;
					color: #1E1E1E;
					line-height: 38rpx;
					margin-bottom: 12rpx;
					margin-top: 28rpx;
					padding: 0 20rpx;
				}

				.home-recommend-price {
					padding: 0 68rpx 0 20rpx;
					box-sizing: border-box;
					font-size: 30rpx;
					line-height: 38rpx;
					margin-bottom: 12rpx;
				}

				.shop-car-btn {
					font-size: 48rpx;
					padding: 18rpx 20rpx;
					position: absolute;
					right: 0;
					bottom: 0;
					color: var(--primary-color);
				}
			}
		}
	}
</style>
